<template>
  <div>
    <a-card>
      <div style="margin-bottom: 20px">
        <a-button :type="activePart === 'SMT' ? 'primary' : ''" @click="changePart('SMT')" style="margin-left: 10px">SMT</a-button>
        <a-button :type="activePart === 'DIP' ? 'primary' : ''" @click="changePart('DIP')" style="margin-left: 10px">DIP</a-button>
        <a-button :type="activePart === 'ASSEMBLY' ? 'primary' : ''" @click="changePart('ASSEMBLY')" style="margin-left: 10px">ASSEMBLY</a-button>
      </div>
      <div class='first-row'>
        <div class='row-item'>
          <SMTYR :activePart="activePart"/>
        </div>
        <div class='row-item'>
          <DIPYR :activePart="activePart"/>
        </div>
        <div class='row-item'>
          <AssemblyYR :activePart="activePart"/>
        </div>
        <div class='row-item'>
          <PICLoss :activePart="activePart"/>
        </div>
      </div>
      <div class='second-row'>
        <a-tabs default-active-key="FPYR" v-model="activeKey" style='width: 100%;'>
          <a-tab-pane key="FPYR" :tab="activePart + '_FPYR'" force-render>
            <SmtyrTrentChart :activePart="activePart" :activeKey="activeKey"/>
          </a-tab-pane>
          <a-tab-pane key="TOP" :tab="activePart + '_TOP issue'">
            <SmtyrTopIssue :activePart="activePart" :activeKey="activeKey"/>
          </a-tab-pane>
          <a-tab-pane key="FAIL" :tab="activePart + '_Fail rate'">
            <SmtfrTrentChart :activePart="activePart" :activeKey="activeKey"/>
          </a-tab-pane>
          <a-tab-pane key="PIC" tab="PIC Loss Fail rate">
            <PicLossChart :active="activePart" :activeKey="activeKey"/>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>
  </div>
</template>

<script>
/** 上部分组件 **/
import SMTYR from '@views/dashboard/components/top/SMTYR' // SMT_YR
import DIPYR from '@views/dashboard/components/top/DIPYR' // DIP_YR
import AssemblyYR from '@views/dashboard/components/top/AssemblyYR' // Assembly_YR
import PICLoss from '@views/dashboard/components/top/PICLoss' // PIC

/** 下部分组件 **/
import SmtyrTrentChart from '@views/dashboard/components/bottom/SmtyrTrentChart' // SMT_YR
import SmtyrTopIssue from '@views/dashboard/components/bottom/SmtyrTopIssue' // SMT_TOP
import SmtfrTrentChart from '@views/dashboard/components/bottom/SmtfrTrentChart' // SMT_FR
import PicLossChart from '@views/dashboard/components/bottom/PicLossChart' // PIClossChart

export default {
  name: "Analysis",
  components: {
    DIPYR,
    SMTYR,
    AssemblyYR,
    PICLoss,

    SmtyrTrentChart,
    SmtyrTopIssue,
    SmtfrTrentChart,
    PicLossChart,
  },
  data() {
    return {
      activePart:'SMT',
      activeKey:'FPYR',
    }
  },
  beforeCreate() {
    this.$store.dispatch('SetBegindate', '')
    this.$store.dispatch('SetEnddate', '')
    this.$store.dispatch('SetKjtext', '按日')
    this.$store.dispatch('SetResearch', false)
    this.$store.dispatch('SetProcode', '')
    this.$store.dispatch('SetLinecode', '')
  },

  beforeRouteLeave (to, from, next) {
    this.$store.dispatch('SetBegindate', '')
    this.$store.dispatch('SetEnddate', '')
    this.$store.dispatch('SetKjtext', '按日')
    this.$store.dispatch('SetResearch', false)
    this.$store.dispatch('SetProcode', '')
    this.$store.dispatch('SetLinecode', '')
    next()
  },
  methods: {
    changePart(index){
      this.$store.dispatch('SetProcode', '')
      this.$store.dispatch('SetLinecode', '')
      this.activePart = index
    }
  }
}
</script>
<style lang='less' scoped>
.first-row {
  width: 100%;
  display: flex;
  .row-item {
    flex: 1;
  }
}
.second-row {
  display: flex;
}
</style>